<template>
	<view class="component_container" :id="'skeleton_' + skeletonId" :style="{ 'min-height': height + 'px' }">
		<view v-if="showSlot" class="container"><slot></slot></view>
	</view>
</template>

<script>
export default {
	name: 'name',
	props: [],
	data() {
		return {
			skeletonId: null,
			showSlot: true,
			height: 0
		};
	},
	mounted() {
		this.skeletonId = this.randomString(); //设置唯一标识
		wx.nextTick(() => {
			// 修改了监听是否显示内容的方法，改为前后showNum屏高度渲染
			// 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})
			let info = this.appInfo;
			let { windowHeight = 667 } = info.windowHeight;
			let showNum = 2; //超过屏幕的数量，目前这个设置是上下2屏
			try {
				uni.createIntersectionObserver(this)
					.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight })
					.observe(`#skeleton_${this.skeletonId}`, res => {
						let { intersectionRatio } = res;
						if (intersectionRatio === 0) {
							this.showSlot = false;
						} else {
							this.height = res.boundingClientRect.height;
						}
					});
			} catch (error) {
				console.log(error);
			}
		});
	},
	methods: {
		randomString(len) {
			len = len || 32;
			var $chars = 'abcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
			var maxPos = $chars.length;
			var pwd = '';
			for (var i = 0; i < len; i++) {
				pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		}
	}
};
</script>

<style lang="scss">
.component_container {
	width: 100%;
	flex-shrink: 0;
	flex-wrap: wrap;
	.container {
		width: 100%;
		flex-shrink: 0;
		flex-wrap: wrap;
	}
}
</style>
